<script setup>
import { ref } from 'vue';
import { loginServiceAPI } from '@/api/user';
import { useRouter } from 'vue-router';
import { useUserStore } from '@/stores';
import parseJWT from '@/utils/jwt';
import { ElMessage } from 'element-plus';

const router = useRouter()
const userStore = useUserStore()
const loginFormRef = ref()
const registerFormRef = ref()
// 登录表单模型
const loginForm = ref({
  userId: '',
  password: '',
  role: '0'
});

// 表单验证规则
const loginRules = {
  userId: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 6, max: 9, message: '长度在 6 到 9 个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 10, message: '长度在 6 到 10 个字符', trigger: 'blur' }
  ],
  role: [{
    required: true,
    message: '请选择角色',
    trigger: 'change'
  }],
};

// 切换到注册页
const switchToRegister = () => {
  router.push('/register')
};
// 处理登录操作
const handleLogin = async () => {
  await loginFormRef.value.validate()
  const { data } = await loginServiceAPI(loginForm.value)
  if (data.code === 200) {
    userStore.setToken(data.data)
    const userInfo = parseJWT(data.data)
    // console.log(userInfo)
    userStore.setUserInfo(userInfo)
    ElMessage.success('登录成功')
    // 登录成功后跳转到首页
    if (userInfo.role === '0') {
      router.push('/student')
    } else if (userInfo.role === '1') {
      router.push('/teacher')
    } else if (userInfo.role === '2') {
      router.push('/admin')
    }
  }
};
</script>
<template>
  <el-container style="height: 100vh;">
    <el-header>
      <h1 style="text-align: center;">作业管理系统</h1>
    </el-header>
    <el-main>
      <el-row justify="center" align="middle" style="height: 100%;">
        <el-col :span="8">
          <el-form :model="loginForm" :rules="loginRules" size="large" ref="loginFormRef" label-position="left" label-width="80px">
             <el-form-item label="角色" :label-width="'80px'" prop="role">
              <el-select v-model="loginForm.role" placeholder="请选择角色">
                <el-option label="学生" value="0"></el-option>
                <el-option label="老师" value="1"></el-option>
                <el-option label="管理员" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="用户名" :label-width="'80px'" prop="userId">
              <el-input v-model="loginForm.userId" placeholder="请输入用户名" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" :label-width="'80px'" prop="password">
              <el-input v-model="loginForm.password" placeholder="请输入密码" type="password" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" style="width: 100%;" @click="handleLogin">登录</el-button>
            </el-form-item>
            <el-form-item>
              <el-link type="primary" underline="never" @click="switchToRegister">没有账号？去注册</el-link>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>


<style scoped>
.el-header {
  background-color: #409EFF;
  padding: 10px;
}

h1 {
  color: white;
  margin: 0;
}

.el-main {
  padding: 20px;
}
</style>
